// 引入react核心包\
import React from 'react'
// 设计DOM来渲染的一个包
import ReactDom from 'react-dom'
// 导入样式
import './index.css'
// 导入图片
import avatar from './images/avatar.png'

// 数据列表
const state = {
	// hot: 热度排序  time: 时间排序
	tabs: [
		{
			id: 1,
			name: '热度',
			type: 'hot'
		},
		{
			id: 2,
			name: '时间',
			type: 'time'
		}
	],
	active: 'time',
	list: [
		{
			id: 1,
			author: '刘德华',
			comment: '给我一杯忘情水',
			time: '2021-11-10 09:09:00',
			img: 'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000',
			// 1: 点赞 0：无态度 -1:踩
			attitude: 1
		},
		{
			id: 2,
			author: '周杰伦',
			comment: '听妈妈的话',
			time: '2021-12-11 09:09:00',
			img: 'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
			// 1: 点赞 0：无态度 -1:踩
			attitude: 0
		},
		{
			id: 3,
			author: '陈奕迅',
			comment: '十年',
			time: '2021-10-11 10:09:00',
			img: 'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
			// 1: 点赞 0：无态度 -1:踩
			attitude: -1
		}
	]
}

// 哔站评论列表
const ele = (
	<div className="App">
		<div className="comment-container">
			<div className="comment-head">
				<span>{state.list.length}条评论</span>
			</div>
			<div className="tabs-order">
				<ul className="sort-container">
					{/* {	<li className="">按热度排序</li>
					<li className="on">按时间排序</li>} */}

					{state.tabs.map((item) => (
						<li className={state.active === item.type ? 'on' : ''} key={item.id}>
							按{item.name}排序
						</li>
					))}
				</ul>
			</div>
			<div className="comment-send">
				<div className="user-face">
					<img className="user-head" src={avatar} alt="" />
				</div>
				<div className="textarea-container">
					<textarea cols="80" rows="5" placeholder="发条友善的评论" className="ipt-txt" />
					<button className="comment-submit">发表评论</button>
				</div>
				<div className="comment-emoji">
					<i className="face" />
					<span className="text">表情</span>
				</div>
			</div>
			<div className="comment-list">
				{state.list.map((item) => (
					<div className="list-item" key={item.id}>
						<div className="user-face">
							<img className="user-head" src={item.img} alt="" />
						</div>
						<div className="comment">
							<div className="user">{item.author}</div>
							<p className="text">{item.comment}</p>
							<div className="info">
								<span className="time">{item.time}</span>
								<span className={`like ${item.attitude === 1 ? 'liked' : ''}`}>
									<i className="icon" />
								</span>
								<span className={`like ${item.attitude === -1 ? 'liked' : ''}`}>
									<i className="icon" />
								</span>
								<span className="reply btn-hover">删除</span>
							</div>
						</div>
					</div>
				))}
			</div>
		</div>
	</div>
)

// 渲染谁，渲染到哪里
ReactDom.render(ele, document.querySelector('#root'))
